<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>个人页面</title>
  <script>
    if(/http:/.test(location.href)) location.href = location.href.replace(/http:/, 'https:')
  </script>
  <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <script src="__PUBLIC__/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="__PUBLIC__/node_modules/datatables/media/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="__PUBLIC__/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="__PUBLIC__/style/manage.css">
  <link rel="stylesheet" href="__PUBLIC__/style/me.css">
  <!-- 弹层 -->
  <script src="__PUBLIC__/script/layer/layer.js"></script>
</head>
<body>
  <!-- 隐藏功能元素区 -->
  <div class="hidden_form">
    <form autocomplete="off" action="{:U('Manageme/manage_me_shenqing')}" method="get" id = 'hidden_form'></form>
  </div>
  <!-- end 隐藏功能元素区 -->

  <div class="container-fluid">
    <div class="col-xs-12" style="height:5px;"></div>
    <div class="col-xs-11 col-xs-offset-1">
      <!-- Nav tabs -->
      <iframe src="{:U('me')}?local=shenqing" frameborder="0" style="width:100%;"></iframe>
    </div>

    <div class="main">
      <!-- logo 区域 -->
      <div class="logo_img">
        <if condition="$Think.session.user.login_img neq null">
        <span><img src="__ROOT__/{$Think.session.user.login_img}" alt="LOGO"></span>
        <else/>
        <span><img src="__PUBLIC__/images/dengluye/u5.png" alt="u5"></span>
        </if>
        <br>
        <span>{$Think.session.user.u_name}</span>
      </div>
      <!-- end logo 区域 -->

      <!-- 筛选区 -->
      <div class="search_form col-xs-offset-1 col-xs-10">
        <div class="ol_search_form_container"><span><img src="__PUBLIC__/images/dengluye/u391.png" alt="u391"></span> <input form="hidden_form" name= 'search' type="text" placeholder="渠道名称、对接人、手机号码" class="search_form"><input form="hidden_form" type="submit" value="搜索" class="search_button"></div>
      </div>
      <!-- end 筛选区 -->

      <!--
        apply_name 姓名
        apply_phone 客户手机号
        apply_idc 身份证号码
        apply_ed 客户贷款申请额度
        apply_scord 合同佣金点数
        apply_data 其他信息
        apply_img_links 征信报告图片
        apply_ht_links 合同图片
       -->
       <!-- begin 申请列表 -->
       <!-- 表头 -->
      <div class="col-xs-offset-1 col-xs-10 table_title">
        <span>已提交的申请</span>
      </div>
      <!-- end 表头 -->

      <!-- 表格区 -->
      <div class="col-xs-offset-1 col-xs-10">
        <table class="messageBoxContent table table-striped table-bordered" id="main_table">
          <thead>
            <tr>
              <th class="authNo">序号</th>
              <th class="authName">姓名</th>
              <th class="authPhone">客户手机号</th>
              <th class="authIDC">身份证号码</th>
              <th class="authEDu">客户贷款申请额度</th>
              <th class="authRePay">合同佣金点数</th>
              <th class="authOthers">展开查看</th>
              <th class="authIMG">征信报告图片</th>
              <th class="authIMG">合同图片</th>
            </tr>
          </thead>
          <tbody>
            <volist name='list' id='vo'>
            <tr>
              <th class="authNo">{$key+1}</th>
              <th class="authName">{$vo.apply_name}</th>
              <th class="authPhone">{$vo.apply_phone}</th>
              <th class="authIDC">{$vo.apply_idc}</th>
              <th class="authEDu">{$vo.apply_ed}</th>
              <th class="authRePay">{$vo.apply_scord}</th>
              <th class="authOthers" inori-data='{$vo.apply_data}' onclick='popupThis(this, event, `{$key+1}`)'>展开查看</th>
              <th class="authIMG">{$vo.apply_img_links}</th>
              <th class="authIMG">{$vo.apply_ht_links}</th>
            </tr>
            </volist>
          </tbody>
        </table>
        <!-- begin 分页 -->
        <div class="authPage">
          <!-- 页面指示器 -->
          <!-- <div class="pages">24/{$count}</div> -->
          <!-- 分页列表 -->
          <!-- <span class="number">...</span> -->
          <div class="pageJump">
            {$page}
          </div>
        </div>
        <!-- end 分页 -->
      </div>
      <!-- end 表格区 -->
      <!-- end 申请列表 -->


    </div>

    <!-- 页脚 -->
    <div class="col-xs-12">
      <div class="footer text-center"><p class="lead"><strong>深圳市東源匯信息科技有限公司</strong></p></div>
    </div>
    <!-- end 页脚 -->
  </div>

  <!-- 弹层 -->
  <div id='detail_wrap'>
  <volist name='list' id='vo'>
    <div class="popupTable" id='popupTable{$key+1}'>
      <div class="line">
        <div class="itemName">客户姓名</div>
        <div class="name">{$vo.apply_name}</div>
        <div class="itemName">手机号</div>
        <div class="phone">{$vo.apply_phone}</div>
        <div class="itemName">身份证</div>
        <div class="idc">{$vo.apply_idc}</div>
      </div>
      <div class="line">
          <div class="itemName">合同额度</div>
        <div class="edu">{$vo.apply_ed}</div>
        <div class="itemName">合同佣金</div>
        <div class="yongjin">{$vo.apply_scord}</div>
      </div>
      <!-- 其他信息一行三个 -->
      <div class="line others" inori-data = '{$vo.apply_data}'>
        <div class="othersName"></div>
        <div class="othersValue"></div>
      </div>
      <!-- 一个img宽100px,点击之后不缩放 -->
      <div class="line authIMG" inori-data='{$vo.apply_img_links}'>
        <div class="othersIMG small"></div>
      </div>
      <div class="line authIMG" inori-data='{$vo.apply_ht_links}'>
        <div class="othersIMG small"></div>
      </div>
    </div>
  </volist>
  </div>
  <!-- end 弹层 -->

  <script>
    $(document).ready(function () {
      // <!-- 表格信息清洗 -->
      $(`#main_table`).find('.authIMG').each((index, item) => {
        const fromText = $(item).text()
        if (fromText === '征信报告图片' || fromText === '合同图片') {
          return
        }
        let toText = ``
        if (fromText === '') {
          toText = `没有上传图片`
        } else {
          const itemLength = fromText.split(',').filter((item) => {
            return item !== ''
          }).length
          if (itemLength === 0) {
            toText = `没有上传图片`
          } else {
            toText = `${itemLength}张图片`
          }
        }
        $(item).text(toText)
      })
      var proList = $('#main_table').DataTable({
        "paging": false,
        "info": false,
        "searching": false
      })
      // 点击弹窗
      // <th class="authOthers" inori-data='{$vo.apply_data}'>展开查看</th>
      $('.authOthers').each((index, item) => {
        if ($(item).attr('inori-data') !== undefined || $(item).attr('inori-data') !== '') {
          $(item).on('click', (evt) => {
            let otherData = $(evt.target).attr('inori-data')
            try {
              otherData = JSON.parse(otherData)
            } catch (err) {
              alert('申请信息填写错误，无法显示')
              console.log(err)
            }

          })
        } else {
          $(item).on('click', (evt) => {
            alert('申请信息填写错误，无法显示')
          })
        }
      })
    })
  </script>

  <!-- 弹层 -->
  <script>
    function popupThis (_this, evt, index) {
      const conventObj = {
        'kehu_edu':'贷款需求',
        'kehu_plan_point':'预计佣金点数',
        'kehu_shouru_way':'收入方式',
        'danwei_xingzhi':'单位性质',
        'business_lic':'营业执照年限',
        'social_sec':'社保年限',
        'fund_time':'公积金年限',
        'danwei_work_time':'现单位工作时长',
        'pay_way':'工资方式',
        'pay_source':'现单位工资金额',
        'avg_cost':'平均月流水',
        'register':'户籍',
        'kehu_more':'补充说明'
      }
      const parEle = $(`#popupTable${index}`)

      // 其他信息
      parEle.find('.line.others').empty()
      // 其他信息的后端渲染消息
      const othersMsg = parEle.find('.line.others').attr('inori-data')
      let templList = ``
      try {
        $.each(JSON.parse(othersMsg), (index, item) => {
          if (item.name === 'kehu_edu') {
            const templ = `
              <div class="othersName">${conventObj[item.name]}</div>
              <div class="othersValue">${item.value}万</div>
            `.trim()
            templList += templ
          } else {
            const templ = `
              <div class="othersName">${conventObj[item.name]}</div>
              <div class="othersValue">${item.value}</div>
            `.trim()
            templList += templ
          }
        })
        parEle.find('.line.others').append(templList)
      } catch (err) {
        alert(`其他消息生成时发生错误，请联系开发者确认`)
        console.log(err)
      }
      // 图片信息
      const othersIMGList = parEle.find('.line.authIMG')
      try {
        othersIMGList.each((index, item) => {
          // 清空元素
          $(item).find('.othersIMG').remove()
          // 添加标题
          $(item).append(`<div class="othersIMG title">${index === 0 ? '征信报告图片' : '合同图片'}</div>`)
          // 图片数组
          let itemMsgArray = $(item).attr('inori-data').split(',')
          itemMsgArray = itemMsgArray.filter((item) => {
            return item !== ''
          })
          // 每一张图片变成一个img
          if (itemMsgArray.length > 0) {
            $.each(itemMsgArray, (subindex, subitem) => {
              $(item).append(`<div class="othersIMG small"><img src='${subitem}' alt='${index}-${subindex}-${subitem}'></div>`)
            })
          }
        })
        othersIMGList.each((index, item) => {
          if ( $(item).find('.othersIMG.small').length === 0 ) {
            $(item).css('display', 'none')
          }
        })
        let IMGLinecount = 0
        othersIMGList.each((index, item) => {
          if ( $(item).find('div').css('display') === 'none' ) {
            IMGLinecount ++
          }
        })
        if (IMGLinecount > 0) {
          $(`#popupTable${index}`).css('border-bottom', '1px solid rgba(1,1,1,0)')
        } else {
          $(`#popupTable${index}`).css('border-bottom', '1px solid #757575')
        }
        // 添加图片点击事件
        // 先清空事件
        parEle.find('img').off('click')
        parEle.on('click', (evt) => {
          if ($(evt.target).closest('.othersIMG').hasClass('small')) {
            $(evt.target).closest('.othersIMG').removeClass('small')
            $(evt.target).closest('.othersIMG').addClass('big')
          } else {
            $(evt.target).closest('.othersIMG').removeClass('big')
            $(evt.target).closest('.othersIMG').addClass('small')
          }
        })
      } catch (err) {
        alert(`图片消息生成时发生错误，请联系开发者确认`)
        console.log(err)
      }
      parEle.css('display', 'block')
      $('#detail_wrap').css('display', 'block')
      //捕获页
      layer.open({
        type: 1,
        area: ['600px', '100%'],
        shade: false,
        title: false, //不显示标题
        content: $(`#popupTable${index}`), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        cancel: () => {
          setTimeout(() => {$('#detail_wrap').css('display', 'none')}, 100)
          // 弹层还回去元素
          setTimeout(() => {parEle.css('display', 'none')}, 1000)
        }
      })
    }
  </script>
</body>
</html>